<template>
  <div>
    {{ viewdata.title }}
    --
    <RouterLink to="/study/complifecircle">生命周期演示</RouterLink>
  </div>
  <hr />
  <div>
    <input id="txtInfo" type="text" v-model="viewdata.info" />
    {{ viewdata.info }}
  </div>
  <hr />
  <!-- 组件演示部分 -->
  <div>
    <CompOne info="设定组件属性值" :dept="viewdata.dept">
      <div>组件标签的嵌套内容</div>
      <template #footer>带名称的插槽</template>
    </CompOne>
    <h1>组件分割</h1>
    <CompOne :info="viewdata.info">
      <template #default>默认插槽</template>
    </CompOne>
  </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, onUpdated, onUnmounted } from 'vue'
import CompOne from '../../components/CompOne.vue'
import { Dept } from '../../ts/Manage'

const viewdata = reactive({
  title: '组件演示页面',
  info: '数据更新演示',
  dept: new Dept(),
})

viewdata.dept.deptName = '开发部'
viewdata.dept.deptInfo = '最有实力的部门'

// 生命周期钩子函数

onMounted(() => {
  // onMounted表示页面元素全部加载完成
  console.log('Comp.vue挂载完毕...')
  console.log('获取id对应的元素：', document.getElementById('txtInfo'))
})

onUpdated(() => {
  console.log('Comp.vue数据更新...')
})

onUnmounted(() => {
  console.log('Comp.vue销毁完毕...')
})

console.log('获取id对应的元素：', document.getElementById('txtInfo'))
</script>
<style></style>
